<template>
  <div style="width: 200px">
    <div v-for="item in arr" :key="item">
      	<p :style="{ marginLeft: (index - 1) * 10 + 'px'}">
            <!-- 判断是否展开 -->
        	<span @click="onoff(item.id)" v-if="item.children">
          		{{ closeList.includes(item.id) ? "➧" : "*" }}
        	</span>
        	<!-- 内容 -->
        	{{ item.text }}
        
      	</p>
      	<!-- 根据传入的值判断 是否需要在递归 -->
        <Digui
           v-if="item.children && !closeList.includes(item.id)"
          :arr="item.children"
          :index="index"
          :key="item.id"
        />
    </div>
  </div>
</template>
<script lang="ts" setup>
import Digui from './digui.vue';
import { reactive, toRefs, ref } from "vue";
type Props = {
    arr: Array<any>,
    index: number
};
let props = defineProps<Props>();
let index = ref(props.index ? props.index : 0);
index.value += 1;

const closeList = reactive([]);
let onoff = function (id) {
    if (closeList.includes(id)) {
    closeList.splice(closeList.indexOf(id));
    } else {
    closeList.push(id);
    }
}
</script>